<template>
  <div>
    <div class="nav_box">添加商品描述</div>
    <textarea id="area" placeholder="  添加商品不能超过(200字)" maxlength="200" v-model="detaileDescription"></textarea>
    <div class="product-content">
      <div class="upload-img">
        <div class="top-tips">
          <span class="text-l">上传图片</span>
          <span class="text-r">最多上传4张</span>
        </div>
        <div class="bottom-upload">
          <div class="same-box" v-for="(iu,index) in imgUrls" :key="iu.imageId">
            <img :src="iu">
            <span class="list-img-close" @click="delImagegod(index)"></span>
          </div>
          <div class="same-box" v-show="imgUrls.length<4">
            <input
              class="upload-img"
              id="inpupimg"
              type="file"
              @change="onFileChange"
              @click="tupxuanze(0,0)"
              accept="image/jpg, image/png, image/gif, image/jpeg, image/svg"
              multiple
            >
            <!--capture="camera"-->
            <label class="jia-icon" for="inpupimg"></label>
          </div>
        </div>
      </div>
    </div>
    <div class="bom_box">
      <router-link to @click.native="baocun()">完成</router-link>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  components: {},
  data() {
    return {
      albumsUrl: [],
      tupxuanzeType: "",
      szstype: "",
      imgUrls: [],
      goodsid: "",
      detaileDescription:'',
      bomimg:'',
      companyid:''
    };
  },
  mounted() {
    this.info();

  },
  methods: {
    info() {
      this.goodsid = this.$route.query.goodsid;
      console.log(this.goodsid,this.imglist);
      this.companyid=this.$route.query.companyid
      console.log('companyid='+this.companyid)
      // this.detaileDescription=sessionStorage.getItem('mstext')
      if(sessionStorage.getItem('mstext')=='null'){
        this.detaileDescription=''
      }else{
        this.detaileDescription=sessionStorage.getItem('mstext')
      }
       if(JSON.parse(sessionStorage.getItem('lastimg'))==null){
         this.imgUrls=[]
      }else{
       this.imgUrls=JSON.parse(sessionStorage.getItem('lastimg'));
      }
      console.log(this.detaileDescription)
      if (
        this.goodsid == 'undefined' ||
        this.goodsid == null ||
        this.goodsid == ""
      ) {
        console.log('Kong')
      } else {
        console.log('编辑')
        this.$http
          .post(
            this.APIURL_PREFIX + "/api/wap/goodsDetail",
            $.param({ goodsId: this.goodsid })
          )
          .then(response => {
            console.log(response)
            this.detaileDescription=response.data.goods.detaileDescription
            console.log(this.detaileDescription)
            
              var fengmian=response.data.detailsAlbumsUrl
                var imgUrls=[]
                fengmian.forEach(element => {
                    imgUrls.push(element.url)
                })
                this.imgUrls=imgUrls
            console.log(this.imgUrls)
          });
      }
    },
    baocun() {
      sessionStorage.setItem('mstext',this.detaileDescription)
      sessionStorage.setItem('lastimg',JSON.stringify(this.imgUrls))
      // this.bomimg=this.imgUrls.join(',')
      console.log(this.bomimg,this.detaileDescription,this.goodsid)
      this.$router.push({path:'me_newgoods',query:{mstext:this.detaileDescription,companyid:this.companyid,}})
     
    },
    delImagegod(index) {
      // console.log(index);
      if (confirm("确定删除该图片？")) {
       this.imgUrls.splice(index, 1);
      }
    },
    onFileChange: function(e, targetparam) {
      var files = e.target.files || e.dataTransfer.files;
      console.log(targetparam);
      console.log(files, e);
      console.log(this[targetparam]);

      if (!files.length) return;
      this.createImage(files, e, targetparam);
    },
    tupxuanze(type, sztype) {
      //   console.log('点击')
      this.tupxuanzeType = type;
      this.szstype = sztype;
    },
    createImage(file, e, targetparam) {
      console.log(file, e, targetparam);

      let vm = this;
      lrz(file[0], { width: 480 })
        .then(function(rst) {
          vm.$http({
            url: vm.APIURL_PREFIX + "/uploadForCertificate",
            method: "post",
            data: rst.formData
          })
            .then(response => {
              console.log(response);
              if (0 == response.data.code) {
                console.log("成功");
                if (targetparam) {
                  vm[targetparam] = response.data.msg;
                  console.log(11);
                } else {
                  if (vm.tupxuanzeType == 0) {
                    console.log(22);
                    if (vm.szstype == 0) {
                      console.log(333);
                      if (vm.imgUrls.length) {
                        vm.imgUrls.push(response.data.msg);
                      } else {
                        vm.imgUrls = [response.data.msg];
                      }
                    } else {
                      console.log(333);
                    }
                  } else if (vm.tupxuanzeType == 1) {
                    console.log(222);
                    if (vm.szstype == 0) {
                      if (vm.imgUrlsxp.length) {
                        vm.imgUrlsxp.push(response.data.msg);
                        console.log(vm.imgUrlsxp);
                      } else {
                        vm.imgUrlsxp = [response.data.msg];
                      }
                    } else {
                    }
                  }
                }
              }
            })
            .catch(function(err) {
              layer.msg("上传失败");
              console.log(err);
            });
          return rst;
        })
        .always(function() {
          e.target.value = null;
        });
    }
  }
};
</script>

<style scoped>
@import "../../assets/personal/css/me_goodsmiaoshu.css";
</style>
